
var node_graphs = {};
var resource_names = []
var RANGE = 360;
var run = true;
var rerun = true;
var tick = false;
var n0 = 0
var n;
var line1;

var xScale;
var yScale;
var xAxis;
var yAxis

var svg;
var svg2;

var map_view = {
	X: 250, 
	Y: 250, 
	scale: 1,
	scales: [0.0125, 0.025, 0.05, 0.1, 0.2, 0.4],
	get_scale: function() {
		return this.scales[this.scale];
	},
	change_scale: function(sign) {
		this.scale = Math.min(Math.max(0, this.scale + sign), this.scales.length);
	}
};

function translate_map(X, Y, scale) {
	return 'translate(' + X + ' ' + Y + ') scale(' + scale + ')';
}

var line = d3.svg.line()
	.x(function(d, n) { 
		return xScale(n); 
	})
	.y(function(d) { 
		return yScale(d);
	});


function drawYAxis(maxY) {
	yScale = d3.scale.linear()
	.domain([0, maxY + 10])
	.range([HEIGHT-PADDING, PADDING]);
	
	d3.select("#yaxis").remove();
	yAxis = d3.svg.axis()
	   .scale(yScale)
	   .orient("left");;
	
	svg.append("g")
	   .attr("id", "yaxis")
	   .attr("class", "axis")
	   .attr("transform", "translate(" + PADDING + ", 0)")
	   .call(yAxis);
	
}
var WIDTH = 500;
var HEIGHT = 500;
var PADDING = 40;

function run_it(token) {
	mousewheel.init();
	mouseclick.init();
	init_channel(token);
	xScale = d3.scale.linear()
	    .domain([0, 100])
	    .range([PADDING, WIDTH-PADDING]);
	xAxis = d3.svg.axis()
	   .scale(xScale)
	   .orient("bottom");
	
	svg = d3.select("#graph");
	   
	svg.attr("width", WIDTH)
	   .attr("height", HEIGHT);

	svg2 = d3.select("#map");
	svg2.attr("width", WIDTH)
        .attr("height", HEIGHT);
	

	
	
	
	
	
	svg.append("g")
	   .attr("class", "axis")
	   .attr("transform", "translate(0," + (HEIGHT - PADDING) + ")")
	   .call(xAxis);
	drawYAxis(100);
}

function init_button() {
	var address = $("#simulator_address").val();
	console.log(address);
	$.getJSON("getresourcenamesandcss", {'address': address}, 
			function(data) {
		$("#node_style").html(data.css);
		var table = '<table id="nodeselection">';
		table += '<td><input type="checkbox" id="checkAllNodes"/>';
		table += '<input type="checkbox" id="checkAllAreas"/>ALL</td>';
		var count = 0;
		resource_names = data.resource_names;
		_.each(resource_names, function(nodename){
			node_graphs[nodename] = [];
			svg.append("svg:path")
			.attr("d", line([]))
			.attr("class", "data1")
			.attr("id", "line_" + nodename);
			if (count%2 == 1) {
				table += "<tr>";
			}
			table += '<td><input type="checkbox" class="checkNode" id="checkNode_' + nodename + '"/>';
			table += '<input type="checkbox" class="checkArea" id="checkArea_' + nodename + '"/>';
			table += nodename + '</td>';
			if (count%2 == 0) {
				table += "<tr>";
			}
			count++;
		});
		table += "</table>";
		$("#totaldata").append(table);
		$("#checkAllNodes").change(function() {
			$(".checkNode").attr("checked", $("#checkAllNodes").is(':checked'));
		});
		$("#checkAllAreas").change(function() {
			$(".checkArea").attr("checked", $("#checkAllAreas").is(':checked'));
		});
	});
}

function animate_stop() {
	run = false;
	rerun = false;
	tick = false;
}

function animate_start() {
	run = true;
	rerun = true;
	tick = true;
	animate_first();
}

function animate_step() {
	run = true;
	rerun = false;
	tick = true;
	animate_first();
}

function redraw() {
	run = true;
	rerun = false;
	tick = false;
	animate_first();	
}

function animate_first() {
	if (run) {

		request_map();
		if (!rerun) {
			run = false;
		}
	}
}



function animate_second(data) {
	maxY = 0;
	_.each(node_graphs, function(graph, key) {
		if (_.has(data.nodes, key)) {
			graph.push(data.nodes[key].length);
			if (_.max(graph) > maxY) {
				maxY = _.max(graph);
			}
		} else {
			graph.push(0);
		}
	});
	drawYAxis(maxY);
	_.each(node_graphs, function(graph, key) {
		if ($("#checkNode_" + key).prop("checked")) {
			d3.select("#line_" + key)
		    	.attr("d", line(graph));
		}
	});
	
	
	
	nodeXScale = d3.scale.linear()
	.domain([-10000, 10000])
	.range([0, WIDTH]);

	nodeYScale = d3.scale.linear()
	.domain([-10000, 10000])
	.range([0, HEIGHT]);
	
	nodeRScale = d3.scale.linear()
	    .domain([0, 10000])
	    .range([0, WIDTH]);
	console.log(data);
	svg2.selectAll("circle").remove();
	_.each(data.nodes, function(list,key) {
		if ($("#checkNode_" + key).prop("checked")) {
			_.each(list, function(xy){
				svg2.append("circle")
				   .attr("class", "node_" + key)
				   .attr("cx", xy[0])
			       .attr("cy", xy[1])
				   .attr("r", 3/0.025)
				   .attr("stroke-width", 1/0.025)
				   .attr("transform", 
		    		  translate_map(map_view.X, map_view.Y, map_view.get_scale()));
			});
			$(".node_" + key).mouseover( function() {
				$("#show_node_name").text(key);
			});
		}
	});
    
	n0++;
	draw_map(data.paths);
	animate_first();
}


  
function draw_map(paths) {
	svg2.selectAll("path").remove();
	_.each(paths, function(path) {
		svg2.insert("path", ":first-child")
		    .attr("stroke", "black")
		    .attr("stroke-width", 100)
		    .attr("id", "mappath")
		    .attr("transform", 
		    		translate_map(map_view.X, map_view.Y, map_view.get_scale()))
		    .attr("fill-rule", "evenodd")
		    .attr("class", "node_" + path[1])
		    .attr("d", path[0]);
    });
}